<template>
  <div class="settings-page">
    <el-card class="center-card">
      <el-form label-width="auto" :model="form">
        <el-form-item label="">
          <el-text class="welcome-title" size="large">注册观弈零代码平台</el-text>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="行业类型">
          <el-select v-model="form.industry" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="员工人数">
          <el-select v-model="form.employeeCount" placeholder="请选择">
            <el-option
                v-for="item in companySizeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="submit">下一步</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { registerInfoKey } from '@/config/app.keys';

const form = ref({
  name: '',
  industry: '',
  employeeCount: ''
});

const options = [
  { value: 'agriculture', label: '农业' },
  { value: 'mining', label: '采矿业' },
  { value: 'manufacturing', label: '制造业' },
  { value: 'utilities', label: '电力、热力、燃气及水生产和供应业' },
  { value: 'construction', label: '建筑业' },
  { value: 'wholesaleRetail', label: '批发和零售业' },
  { value: 'transportation', label: '交通运输、仓储和邮政业' },
  { value: 'accommodationCatering', label: '住宿和餐饮业' },
  { value: 'informationTechnology', label: '信息传输、软件和信息技术服务业' },
  { value: 'finance', label: '金融业' },
  { value: 'realEstate', label: '房地产业' },
  { value: 'leasingBusinessServices', label: '租赁和商务服务业' },
  { value: 'scientificResearch', label: '科学研究和技术服务业' },
  { value: 'waterManagement', label: '水利、环境和公共设施管理业' },
  { value: 'residentialServices', label: '居民服务、修理和其他服务业' },
  { value: 'education', label: '教育' },
  { value: 'healthSocialWork', label: '卫生和社会工作' },
  { value: 'cultureSportsEntertainment', label: '文化、体育和娱乐业' },
  { value: 'publicAdministration', label: '公共管理、社会保障和社会组织' },
  { value: 'internationalOrganizations', label: '国际组织' }
];
const companySizeOptions = [
  { value: '1-10', label: '1-10人（微型企业）' },
  { value: '11-50', label: '11-50人（小型企业）' },
  { value: '51-200', label: '51-200人（中型企业）' },
  { value: '201-500', label: '201-500人（中大型企业）' },
  { value: '501-1000', label: '501-1000人（大型企业）' },
  { value: '1001-5000', label: '1001-5000人（较大企业）' },
  { value: '5001-10000', label: '5001-10000人（大企业）' },
  { value: '10000+', label: '10000人以上（超大型企业）' }
];
const router = useRouter();

const reginsterInfo = ref({
  tenantInfo: {
    name: '',
    industry: '',
    employeeCount: ''
  },
  userInfo: {
    username: '',
    password: '',
    phone: ''
  }
});



function submit(event: Event) {
  event.preventDefault();
  reginsterInfo.value.tenantInfo = form.value;
  localStorage.setItem(registerInfoKey, JSON.stringify(reginsterInfo.value));
  router.push('/personregister');
}

onMounted(() => {
  // 在这里初始化表单值，例如填充默认值或从存储中恢复状态
});
</script>

<style scoped>
.settings-page {
  max-width: 600px;
  margin: auto;
  display: flex;
  justify-content: center;
  height: 80vh;
}
.welcome-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #1f2329;
}
.center-card {
  width: 500px;
}
</style>
